<template>
  <div id="">
    <el-select
      v-model="value"
      clearable
      filterable
      :disabled="disabled"
      :loading="loadingFlag"
      placeholder="请输入物资编码"
      :filter-method="filterMethod"
      @clear="clear()"
    >
      <el-option
        v-for="item in options"
        :label="item.assetNo+'-'+item.assetDesc"
        :value="item.assetId"
      />
    </el-select>
  </div>
</template>

<script>
import {
  getAsset
} from '@/api/select'
export default {
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    assetNo: {
      type: String,
      default: ''
    },
    assetId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      value: null,
      options: [],
      loading: false,
      _timer: null,
      flag: true,
      loadingFlag: false,
      assetNoSon: null
    }
  },
  watch: {
    value: function(value) {
      console.log('值变化了2：' + value)
      let obj = {}
      if (value != null && value.length > 0) {
        if (this.flag) {
          obj = this.options.find(item => item.assetId === value)
          this.flag = true
          this.$emit('selectData', obj)
        }
      }
    },
    assetNoSon: function(assetNo) {
      if (assetNo != null && assetNo.length > 0) {
        this.flag = false
        const data = Object.assign({
          // assetDesc: query,
          assetNo: assetNo
        })
        this.options = []
        this.value = null
        getAsset(data).then(res => {
          this.value = this.assetId || res.content[0].assetId
          this.options = res.content
        })
      }
    }
  },
  created() {
    this.assetNoSon = this.assetNo
  },
  beforeDestroy() {
    this._timer && clearTimeout(this._timer)
  },
  methods: {
    filterMethod(query) {
      this.loadingFlag = true
      this._timer && clearTimeout(this._timer)
      if (query != null && query.length > 0) {
        const _this = this
        this._timer = setTimeout(function() {
          const data = Object.assign({
            // assetDesc: query,
            assetNo: query
          })
          _this.options = []
          getAsset(data).then(res => {
            _this.flag = true
            _this.loadingFlag = false
            _this.options = res.content
          })
        }, 2000)
      }
    },
    clear() {
      this.value = null
      this.flag = true
      const obj = {
        assetNo: null,
        assetId: null,
        brand: null,
        model: null,
        spec: null
      }
      this.$emit('selectData', obj)
    },
    updataData(assetNo) {
      this.flag = false
      if (assetNo != null && assetNo.length > 0) {
        const data = Object.assign({
          // assetDesc: query,
          assetNo: assetNo
        })
        this.options = []
        getAsset(data).then(res => {
          this.value = res.content[0].assetId
          this.options = res.content
        })
      } else {
        this.value = null
        // this.options = [];
      }
    }
  }
}
</script>
